<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title>导游管理</title>
<link rel="stylesheet" href="${ctx}/my/css/pintuer.css">
<link rel="stylesheet" href="${ctx}/my/css/admin.css">
<script src="${ctx}/my/js/jquery.js"></script>
<script src="${ctx}/my/js/pintuer.js"></script>
<link rel="stylesheet" href="${ctx}/my/css/dataTables.bootstrap.min.css" />
<link rel="stylesheet" href="${ctx}/my/css/jquery.dataTables.min.css" />
<script
		src="${ctx}/my/js/jquery.dataTables.min.js"></script>
<script src="${ctx}/my/js/dataTables.bootstrap.min.js"></script>
</head>
<body>
	<form method="post" action="" id="listform">
		<div class="panel admin-panel">
			<div class="panel-head">
				<strong class="icon-reorder">导游管理</strong> <a href=""
					style="float: right; display: none;">添加字段</a>
			</div>
			<div class="padding border-bottom">
				<ul class="search" style="padding-left: 10px;">
					<li><a class="button border-main icon-plus-square-o"
						href="${ctx}/guide/add"> 添加导游</a></li>
				</ul>
			</div>
			<table class="table table-hover text-center"  id="editable">
				<thead>
					<tr>
						<th hidden="hidden">id</th>
						<th>名称</th>
						<th>邮箱</th>
						<th>电话</th>
						<th>QQ</th>
						<th>性别</th>
						<th>旅行社</th>
						<th>备注</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${list}" var="item">
						<tr class="gradeX">
							<td hidden="hidden">${item.id}</td>
							<td>${item.name}</td>
							<td>${item.email}</td>
							<td>${item.phone}</td>
							<td>${item.qq}</td>
							<td>
							<c:if test="${item.sex == true}">男</c:if>
							<c:if test="${item.sex == false}">女</c:if>
							</td>
							<td>${item.agency.name}</td>
							<td>${item.remark}</td>
							<td>
								<div class="button-group">
									<a class="button border-main"
										href="${ctx}/guide/update?id=${item.id}"> <span
										class="icon-edit"></span> 编辑
									</a> <a class="button border-red"
										href="${ctx}/guide/delete?id=${item.id}"> <span
										class="icon-trash-o"></span> 删除
									</a>
								</div>
							</td>
						</tr>
					</c:forEach>
					<!-- more data -->
				</tbody>
			</table>
		</div>
	</form>
</body>
<script type="text/javascript">
$(document).ready(function() {
	var t = $('#editable').DataTable({
		"pagingType": "full_numbers",
		"bProcessing": true,
		"oLanguage": {
	         "sLengthMenu": "每页显示 _MENU_ 条记录",
	         "sZeroRecords": "对不起，查询不到任何相关数据",
	         "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_条记录",
	         "sInfoEmtpy": "找不到相关数据",
	         "sInfoFiltered": "数据表中共为 _MAX_ 条记录)",
	         "sProcessing": "正在加载中...",
	         "sSearch": "搜索",
	         "oPaginate": {
	         "sFirst": "第一页",
	         "sPrevious":" 上一页 ",
	         "sNext": " 下一页 ",
	         "sLast": " 最后一页 "
	         }
		},
		"columnDefs": [{
			//禁止排序
			"targets": [0, 3],
			"orderable": false
		}, {
			"targets": [0, 3],
			"searchable": false
		}]
	});

	t.on('order.dt search.dt', function() {
		t.column(0, {
			"search": 'applied',
			"order": 'applied'
		}).nodes().each(function(cell, i) {
			cell.innerHTML = i + 1;
		});
	}).draw();
})
</script>
</html>